import React from "react";
import { Menu } from "antd";
import logo from "../../logo.svg";
import style from "./style.module.css";
import { useNavigate } from "react-router-dom";

export const Header = () => {
  const navigate = useNavigate();

  const items = [
    { label: "菜单项一", key: "item-1" }, // 菜单项务必填写 key
    { label: "菜单项二", key: "item-2" },
    {
      label: "子菜单",
      key: "submenu",
      children: [
        { label: "子菜单项", key: "submenu-item-1" },
        { label: "子菜单项", key: "submenu-item-2" },
        { label: "子菜单项", key: "submenu-item-3" },
        {
          label: "排行榜",
          key: "/rank/list",
        },
        {
          label: "子菜单项",
          key: "submenu-item-5",
        },
      ],
    },
  ];

  return (
    <div className={style["header"]}>
      <img src={logo} alt="" className={style["logo"]} />
      <Menu
        items={items}
        mode="horizontal"
        onClick={({ key }) => {
          navigate(key);
        }}
      />
    </div>
  );
};
